import React, { Component } from 'react';

// import Header from './componnents/Header'
// import Content from './componnents/Content'
// import './css/Header.css' //会造成全局渲染

// import styles from './css/Header.model.css'

/* export default class App extends Component {
  render() {
    return (
      <div className="app">
          header-model-css
          <Header></Header>
          <Content></Content>
      </div>
    );
  }
} */

/* export default class App extends Component {
  constructor (props){
    super(props);
    this.state = {
      msg:"helloReact"
    }
  }
  // render() {
  //   return (
  //     <div className="app">
  //         header-model-css
  //         <div>
  //             {this.state.msg}
  //         </div>
  //         <Header></Header>
  //         <Content></Content>
  //     </div>
  //   );
  // }
//bind解决拿关键字
  render() {
    return (
      <div>
          <p onClick={this.handleClick.bind(this)}>
              {this.state.msg}
          </p>
          <Header></Header>
          <Content></Content>
      </div>
    );
  }
  handleClick(){
    console.log(this)
    this.setState({
      msg:"change"
    })
  }
} */

/* export default class App extends Component {
  constructor (props){
    super(props);
    this.handleClick = this.handleClick.bind(this)
    this.state = {
      msg:"helloReact"
    }
  }

  render() {
    return (
      <div>
          <p onClick={this.handleClick}>
              {this.state.msg}
          </p>
      </div>
    );
  }
  handleClick(){
    console.log(this)
    // this.setState({
    //   msg:"change"
    // })
  }
} */

export default class App extends Component {
  constructor (props){
    super(props);
    this.state = {
      msg:"helloReact"
    }
    console.log(1)
  }

  render() {
    console.log(2)
    return (
      <div>
          <p onClick={this.handleClick.bind(this,(this.state.msg))}>
              {this.state.msg}
          </p>
      </div>
    );
  }
  handleClick(){
    console.log(this)
    // this.setState({
    //   msg:"change"
    // })
  }

  //生命周期
  componentDidCatch(){
    console.log("catch")
  }
  componentDidMount(){

    console.log("mount")
  }
  componentDidUpdate(){
    console.log("update")
  }
}

